<template>
  <div ref="chartRef" :class="className" :style="{height:height,width:width}" />
</template>

<script>
  import * as echarts from 'echarts'
  require('echarts/theme/macarons')
  import resize from './mixins/resize'
  import { findFundFunds } from '@/api/fund/investor/fundInvestor'
  import { moneyFormat } from '@/utils/ruoyi'
  import { sumFundExpense } from '@/api/fund/expense/fundExpense'

  export default {
    mixins: [resize],
    props: {
      // // 要分配数据
      // pieEchartArray: {
      //   type: Array,
      //   default: () => []
      // },
      // class
      className: {
        type: String,
        default: 'chart'
      },
      // 宽度
      width: {
        type: String,
        default: '100%'
      },
      // 高度
      height: {
        type: String,
        default: '400px'
      }
    },
    data() {
      return {
        chart: null
      }
    },

    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    mounted() {
      this.$nextTick(() => {
        this.getList()
      })
    },
    methods: {
      getList() {
        findFundFunds(this.$route.query.id).then(response => {
            // 总实缴金额
            var accumulatedPaidMount = response.data.accumulatedPaidMount
            // 总认缴金额
            var subscribedAmount = response.data.subscribedAmount
            // 实际投资金额
            var amountInvestmentFact = response.data.amountInvestmentFact
            // 未缴金额：当前基金LP总认缴-当前基金LP总实缴
            var temp1 = subscribedAmount - accumulatedPaidMount
            // 在缴金额：当前基金LP总实缴
            var temp2 = accumulatedPaidMount
            var temp3 = 0
            sumFundExpense(this.$route.query.id).then(res => {
              // 可投金额：当前基金LP总实缴 – 当前基金作为投资主体的实际投资金额
              temp3 = accumulatedPaidMount - amountInvestmentFact - Number(res.data)
              const unit = this.$t('金额单位')
              var data = [
                { value: temp1, name: (this.$t('未缴金额') + unit + ': ') + moneyFormat(temp1, 'w') },
                { value: temp2, name: (this.$t('在缴金额') + unit + ': ') + moneyFormat(temp2, 'w') },
                { value: temp3, name: (this.$t('可投金额') + unit + ': ') + moneyFormat(temp3, 'w') }
              ]
              this.initChart(data)
            })
        })
      },
      // 要分配数据 pieEchartArray
      initChart(pieEchartArray) {
        if (pieEchartArray === null || pieEchartArray.length <= 0) {
          console.log('饼状图未发现数据')
        } else {
          this.chart = echarts.init(this.$refs.chartRef, null)
          this.chart.setOption({
            tooltip: {
              trigger: 'item',
              formatter: '{b} '
            },
            legend: {
              orient: 'vertical',
              bottom: '20',
              // data: ['未缴金额：300.00', '在缴金额：100.00', '可投金额：200.00'],
              textStyle: {
                color: '#000',
                fontSize: 12,
                itemWidth: 12,
                itemHeight: 12,
                itemGap: 10
              }
            },
            color: ['#51ACFE', '#4FD1D1', '#62D283', '#FBD94F', '#F5768C', '#A473E8', '#6769D6', '#FFAD58', '#5A6596'],
            series: [
              {
                name: this.$t('金额'),
                type: 'pie',
                radius: '50%',
                center: ['50%', '35%'],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    show: false,
                    textStyle: {
                      fontSize: '15',
                      fontWeight: 'bold'
                    }
                  }
                },
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                data: pieEchartArray
              }
            ],
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          })
        }
      },
      // 增加高度
      formatHeigth(value) {
        if (value.indexOf('%') !== -1) {
          return value
        }
        if (value.indexOf('px') === -1) { // 组件没写px
          value = 65 + parseInt(value)
          value += 'px'
          console.log(value)
        } else {
          try {
            value = value.substring(0, value.indexOf('px'))
            value = parseInt(value) + 65
            value += 'px'
          } catch (e) {
            return value
          }
        }
        return value
      },
      formatWidth(value) {
        if (value.indexOf('%') !== -1) {
          return '100%'
        }
      }
    }
  }
</script>
<style scoped>
  .list-table{
    margin-top: 15px;
    margin: 0px;
  }
</style>
